<template>
  <div class="guanliyuanliebiao">
    <div>
      <a-button type="primary" class="editable-add-btn" @click="handleAdd">
        +新增管理员
      </a-button>
      <a-input-search
        v-model="searchValue"
        placeholder="input search text"
        enter-button
        style="width: 300px"
        @search="onSearch(searchValue)"
      />
      <a-table bordered :data-source="dataSource" :columns="columns">
        <template slot="name" slot-scope="text, record">
          <editable-cell
            :text="text"
            @change="onCellChange(record.key, 'name', $event)"
          />
        </template>
        <template slot="account" slot-scope="text, record">
          <editable-cell
            :text="text"
            @change="onCellChange(record.key, 'account', $event)"
          />
        </template>
        <template slot="email" slot-scope="text, record">
          <editable-cell
            :text="text"
            @change="onCellChange(record.key, 'email', $event)"
          />
        </template>
        <template slot="character" slot-scope="text, record">
          <editable-cell
            :text="text"
            @change="onCellChange(record.key, 'character', $event)"
          />
        </template>
        <template slot="operation" slot-scope="text, record">
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="() => onDelete(record.key)"
          >
            <a href="javascript:;">删除&nbsp;</a>
          </a-popconfirm>
          <a-popconfirm
            v-if="dataSource.length"
            title="Sure to delete?"
            @confirm="test"
          >
            <a href="javascript:;">&nbsp; &nbsp; &nbsp;重置密码</a>
          </a-popconfirm>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script>
import EditableCell from './EditableCell'

export default {
  components: {
    EditableCell,
  },
  mounted() {
    this.axios.defaults.headers.common[
      'Authorization'
    ] = window.sessionStorage.getItem('token')
    this.axios.post('/user/query_superuser/').then(res => {
      this.dataSource = res
    })
  },
  data() {
    return {
      searchValue: '',
      dataSource: [],
      // dataSource: [
      // {
      // key: '0',
      // name: '欧阳欣',
      // account: '2020110780',
      // email: '123@163.com',
      // character: '超级管理员',
      // lastloginTime: '2021-5-26',
      // password:'123456'
      // },
      // {
      // key: '1',
      // name: '李想',
      // account: '2020110779',
      // email: '456@163.com',
      // character: '超级管理员',
      // lastloginTime: '2021-5-26',
      // password:'123456'
      // },
      // ],
      count: 2,
      columns: [
        {
          title: '姓名',
          dataIndex: 'name',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '账号(学工号)',
          dataIndex: 'account',
          scopedSlots: { customRender: 'account' },
        },
        {
          title: '邮箱',
          dataIndex: 'email',
          scopedSlots: { customRender: 'email' },
        },
        {
          title: '角色',
          dataIndex: 'character',
          scopedSlots: { customRender: 'character' },
        },
        {
          title: '最近登录时间',
          dataIndex: 'lastloginTime',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    }
  },
  methods: {
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource]
      const target = dataSource.find(item => item.key === key)
      if (target) {
        target[dataIndex] = value
        this.dataSource = dataSource
      }
    },
    onDelete(key) {
      const dataSource = [...this.dataSource]
      this.dataSource = dataSource.filter(item => item.key !== key)
    },
    handleAdd() {
      const { count, dataSource } = this
      const newData = {
        key: count,
        name: `name${count}`,
        account: 'account',
        email: `email`,
        character: 'character',
        lastloginTime: 'lastloginTime',
      }
      this.dataSource = [...dataSource, newData]
      this.count = count + 1
    },
    test() {},
    onSearch(searchValue) {
      this.axios.post('/user/query_superuser/').then(res => {
        this.dataSource = res
      })
    },
  },
}
</script>

<style lang="scss">
.guanliyuanliebiao {
  .editable-cell {
    position: relative;
  }

  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    line-height: 18px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell:hover .editable-cell-icon {
    display: inline-block;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-left: 18px;
    margin-bottom: 30px;
    margin-right: 700px;
  }
}
</style>
